<template>
    <div class="article-meta">
        <nuxt-link 
            :to="{
                name: 'profile',
                params: {
                    username: article.author.username
                }
            }"><img :src="article.author.image" /></nuxt-link>
        <div class="info">
          <nuxt-link 
            :to="{
                name: 'profile',
                params: {
                    username: article.author.username
                }
            }" class="author">{{ article.author.username }}</nuxt-link>
          <span class="date">{{ article.createdAt | date('MMM DD, YYYY')}}</span>
        </div>

        <template v-if="article.author.username !== user.username">
        <button
            :disabled="requestLoading.follow"
            @click="onFollow"
            class="btn btn-sm btn-outline-secondary" 
            :class="{
                active: article.author.following
            }">
          <i class="ion-plus-round"></i>
          &nbsp;
           {{ article.author.following ? 'Unfollow' : 'Follow'}} {{ article.author.username }} 
        </button>
        &nbsp;
        <button 
          :disabled="requestLoading.favorited"
          @click="onFavorite" class="btn btn-sm btn-outline-primary"
            :class="{
                active: article.favorited
            }">
          <i class="ion-heart"></i>
          &nbsp;
          {{ article.favorited ? 'Unfavorite Post ' : 'Favorite Post' }} <span class="counter">({{ article.favoritesCount }})</span>
        </button>
        </template>

        <template v-else>
         <nuxt-link :to="{
              name: 'editor',
              query: {
                id: article.slug
              }  
            }" >
          <button
            :disabled="requestLoading.follow"
            @click="onFollow"
            class="btn btn-sm btn-outline-secondary"> 
           
              <i class="ion-edit"></i>
              &nbsp;
              Edit Article 
           
        </button>
        </nuxt-link>
        &nbsp;
        <button 
          :disabled="requestLoading.delete"
          @click="onDelete" class="btn btn-sm btn-outline-danger">
          <i class="ion-trash-a"></i>
          &nbsp;
          Delete Article
        </button>

        </template>
    </div>
</template>

<script>

import { addFavorite, deleteFavorite, followUser, unFollowUser, deleteArticle } from '@/api/article'
import { mapState } from 'vuex'
export default {
    name:'ArticleMeta',
    props: {
        article: {
            type: Object,
            required: true
        },
    }, 
    data () {
      return { 
        requestLoading: {
          follow: false, 
          favorited : false,
          delete: false
        }
      }
    },
    methods: {
      async onFavorite () {
        this.requestLoading.favorited = true
        if (this.article.favorited) {
          // 取消点赞
          await deleteFavorite(this.article.slug)
          this.article.favorited = false
          this.article.favoritesCount -= 1
        } else {
          // 添加点赞
          await addFavorite(this.article.slug)
          this.article.favorited = true
          this.article.favoritesCount += 1
        }
        this.requestLoading.favorited = false
         
      },
      async onFollow () {
        
        this.requestLoading.follow = true
        if (this.article.author.following) {
            // 取消关注
            await unFollowUser(this.article.author.username)
            this.article.author.following = false
        } else {
            // 关注
            await followUser(this.article.author.username)
            this.article.author.following = true
        }
        this.requestLoading.follow = false
      },
      async onDelete () {
        this.requestLoading.delete = true
        await deleteArticle(this.article.slug)
        this.requestLoading.delete = false
        this.$router.push('/')
      }
    },
    computed: {
      ...mapState(['user'])
    }
};
</script>
